import type { ProFormInstance } from '@ant-design/pro-form';
import {DrawerForm,ProFormSelect,ProFormText,ProFormTextArea,} from '@ant-design/pro-form';
import React, { useRef, useState } from 'react';
import { useModel } from 'umi';
import * as c from '@/services/consts';
import { Col, Row, Tabs } from 'antd';
import TabPane from 'antd/es/tabs/TabPane';

// import { DefaultOptionType } from 'antd/es/select';
// import { Checkbox } from 'antd';
// import { CheckboxValueType } from 'antd/es/checkbox/Group';

type FormProps = {
  visible: boolean;
  // defaultProductId: number | undefined;
  current: API.NodeTemplate | undefined;
  onCancel: () => void;
  onSubmit: (values: API.NodeTemplate) => Promise<void>;
};

const Form: React.FC<FormProps> = (props) => {
  const { visible, current, onCancel, onSubmit } = props;
  if (!visible) {
    return null;
  }

  let defaultCurrent: Partial<API.NodeTemplate> | undefined = undefined;
  if (!current) {
    defaultCurrent = {
      // productId: defaultProductId,
    };
  }

  const formRef = useRef<ProFormInstance>();
  
  // const [productId, setProductId] = useState<number | undefined>(undefined);
  const [areas, setAreas] = useState<string[] | undefined>(current?.areas);

  const { getProductOptions } = useModel('useGlobalModel', (model) => ({
    getProductOptions: model.getProductOptions,
  }));

  const productOptions = getProductOptions(false);

  // const [checkedList, setCheckedList] = useState<any[]>(current?.areas);
  // const onCheckChange = (list: CheckboxValueType[]) => {
  //   // console.log(list);
  //   setCheckedList(list);
  // };


  const handleFormSubmit = async (record: API.NodeTemplate) => {

    record.areas = areas;

    onSubmit(record);
  };

  return (
    <DrawerForm<API.NodeTemplate>
      open={visible}
      formRef={formRef}
      autoFocusFirstInput
      width={1500}
      title={`${current ? '编辑' : '添加'}配置模板`}
      initialValues={current ? current : defaultCurrent}
      onFinish={handleFormSubmit}
      drawerProps={{
        // forceRender: true,
        // destroyOnClose: true,
        // closable: false,
        onClose: onCancel,
        maskClosable: false,
      }}
    >
      <Row gutter={24}>
        {/* <Col span={4}>
          <ProFormSelect
            name="productId"
            label="产品"
            options={productOptions}
            rules={[{ required: true, message: '请选择产品' }]}
            // fieldProps={{
            //   onChange(value, option) {
            //       setProductId(value);
            //   },
            // }}
          />
        </Col> */}
        <Col span={4}>
          <ProFormSelect
            name="area"
            label="国家地区"
            options={c.Countrys}
            showSearch={true}
            initialValue={areas}
            rules={[{ required: true, message: '请选择国家地区' }]}
            fieldProps={{
              onChange(value, option) {
                setAreas(value ? [value] : undefined)
              },
            }}
          />
        </Col>
        <Col span={8}>
          <ProFormText
            name="name"
            label="名称"
            rules={[{ required: true, message: '请输入名称' }]}
            placeholder="请输入名称"
          />
        </Col>
      </Row>
      {/* <Row gutter={24}>
          <Col span={24}>国家地区</Col>
          <Checkbox.Group
            key="cgAreas"
            value={checkedList}
            onChange={onCheckChange}
            style={{ marginBottom: 30 }}
          >
              {c.MinCountrys.map((val) => {
                return (
                  <Col span={3}>
                    <Checkbox value={val}>{val}</Checkbox>
                  </Col>
                );
              })}
          </Checkbox.Group>
      </Row> */}
      <Row gutter={24}>
        <Col span={24}>
          <ProFormTextArea name="remark" label="备注" />
        </Col>
      </Row>
      <Row gutter={24}>
        <Col span={24}>          
        <Tabs type="card">
          
        <TabPane tab="根配置" key="1" style={{border:1,borderStyle:'solid',borderColor:'#eee',marginTop:-18, padding:20}}>
          <Row gutter={24}>
            <Col span={12}>
              <ProFormTextArea 
                name="serverRootConfig" 
                label="服务端根配置"
                rules={[{ required: true, message: '请输入服务端根配置' }]}
                fieldProps={{rows:30}} 
              />
            </Col>
            <Col span={12}>
              <ProFormTextArea 
                name="clientRootConfig"
                label="客户端根配置"
                rules={[{ required: true, message: '请输入客户端根配置' }]}
                fieldProps={{rows:30}} 
              />
            </Col>
          </Row>
        </TabPane>

        <TabPane tab="服务端路由配置" key="2" style={{border:1,borderStyle:'solid',borderColor:'#eee',marginTop:-18, padding:20}}>
          <Row gutter={24}>
            <Col span={12}>
              <ProFormTextArea 
                name="serverBlockDomains" 
                label="域名过滤"
                fieldProps={{rows:30}}
              />
            </Col>
            <Col span={12}>
              <ProFormTextArea 
                name="serverBlockIps"
                label="IP过滤"
                fieldProps={{rows:30}} 
              />
            </Col>
          </Row>
        </TabPane>

        <TabPane tab="客户端路由配置" key="3" style={{border:1,borderStyle:'solid',borderColor:'#eee',marginTop:-18, padding:20}}>
          <Row gutter={24}>
            <Col span={12}>
              <ProFormTextArea 
                name="clientDirectDomains" 
                label="域名直连"
                fieldProps={{rows:30}}
              />
            </Col>
            <Col span={12}>
              <ProFormTextArea 
                name="clientDirectIps"
                label="IP直连"
                fieldProps={{rows:30}}
              />
            </Col>
          </Row>
        </TabPane>

        <TabPane tab="Http配置" key="4" style={{border:1,borderStyle:'solid',borderColor:'#eee',marginTop:-18, padding:20}}>
          <Row gutter={24}>
            <Col span={12}>
              <ProFormTextArea
                name="serverHttpConfig" 
                label="服务端Http配置"
                fieldProps={{rows:30}} 
              />
            </Col>
            <Col span={12}>
              <ProFormTextArea 
                name="clientHttpConfig"
                label="客户端Http配置"
                fieldProps={{rows:30}} 
              />
            </Col>
          </Row>
        </TabPane>

        <TabPane tab="Https配置" key="5" style={{border:1,borderStyle:'solid',borderColor:'#eee',marginTop:-18, padding:20}}>
          <Row gutter={24}>
            <Col span={12}>
              <ProFormTextArea
                name="serverHttpsConfig" 
                label="服务端Https配置"
                fieldProps={{rows:30}} 
              />
            </Col>
            <Col span={12}>
              <ProFormTextArea 
                name="clientHttpsConfig"
                label="客户端Https配置"
                fieldProps={{rows:30}} 
              />
            </Col>
          </Row>
        </TabPane>

        <TabPane tab="Vision配置" key="6" style={{border:1,borderStyle:'solid',borderColor:'#eee',marginTop:-18, padding:20}}>
          <Row gutter={24}>
            <Col span={12}>
              <ProFormTextArea
                name="serverVisionConfig" 
                label="服务端Vision配置"
                fieldProps={{rows:30}} 
              />
            </Col>
            <Col span={12}>
              <ProFormTextArea 
                name="clientVisionConfig"
                label="客户端Vision配置"
                fieldProps={{rows:30}} 
              />
            </Col>
          </Row>
        </TabPane>

        <TabPane tab="Reality配置" key="7" style={{border:1,borderStyle:'solid',borderColor:'#eee',marginTop:-18, padding:20}}>
          <Row gutter={24}>
            <Col span={12}>
              <ProFormTextArea
                name="serverRealityConfig" 
                label="服务端Reality配置"
                fieldProps={{rows:30}} 
              />
            </Col>
            <Col span={12}>
              <ProFormTextArea 
                name="clientRealityConfig"
                label="客户端Reality配置"
                fieldProps={{rows:30}} 
              />
            </Col>
          </Row>
        </TabPane>

        </Tabs>
        </Col>
      </Row>

    </DrawerForm>
  );
};

export default Form;
